Fric-frac Positioneren met CSS

De opmaak bestaat uit:

positioneren, hoogte en breedte van de elementen
de eigenlijke opmaak met kleur, lettertype, enz

Hier houden we ons bezig met het positioneren.

Doelstelling

De pagina's moete responsief zijn:
1. we postioneren HTML elementen me Flexbox;
2. meten doen we in percenten (%) en met em;
3. we gebruiken media queries om de plaats, volgorde en grootte van de HTML elementen te veranderen al naar gelang de afdrukstand en grootte van het browservenster;

Stappenplan

Een css bestand maken
1. Maak een submap in fric-frac-simple-CRUD/public met de naam css.
2. Maak daarin een css bestand met de naam app.css.
3. Link je app.css in je html bestand:
```
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fric-frac simple CRUD</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
```
4. We gebruiken de CSS klassennamen die staan op de Admin index Wireframe met klassen.
Positioneren
1. Deze videoclip geeft een overzicht van hoe we de elementen in de Admin index pagina positioneren:
2. Om de elementen te positioneren gaan we CSS Flexbox gebruiken.
3. Hoogte en breedte stellen we in met em en percenten(%).
4. Als we met percenten (%) werken is het aan te raden om te kiezen voor het border-box model.
5. Elke browser stelt standaard een bepaalde waarde in voor margin en padding. We willen die echter zelf instellen.
6. We gebruiken de universele selector om voor alle elementen het border-box model, de margin en padding in te stellen:
```
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
```
7. Breedte en hoogte van de elementen worden vaak in percenten (%) uitgedrukt. Daarom moeten alle bovenliggende elementen ook in percenten (%) uitgedrukt worden:
```
html, body {
    height: 100%;
    width: 100%;
}
```
8. Van het HTML element van de klasse .editor maken we een flex-container waarin we de pageheader, het artikel en de pagefooter onder elkaar stapelen. De hoogte stellen we in op de hoogte van het browservenster:
```
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}
```
9. De pageheader stellen we ook in als een flex-container omdat we het controle paneel en de banner vertikaal in het midden willen plaatsen. We geven nu al de achtergrondkleur mee zodat we die kunnen visualiseren. De minimum hoogte leggen we vast op 75 pixels. Links en rechts voegen we witruimte toe met padding:
```
.page-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-height: 75px;
    padding: 0 1em 0 1em;
    background-color: rgb(226,69,16);
    color: rgb(250,240,230); /* linnen */
}
```
10. De teskt in de banner willen we uiterst rechts plaatsen. Dan doen we met:
  .
```
page-header .banner {
    text-align: right;
    flex-grow: 1;
}
```
  De flex-grow is een attribuut van flexbox. Daarmee wordt het element groter naarmate dat er meer witruimte in het container beschikbaar is. Het controlepaneel bevat knoppen en heeft een vaste breedte.
11. Het html element van de index klasse stellen we ook in als een flexbox container. Met flex-direction: row plaatsen we de tegels erin op de horizontale as. en als één lijn vol is plaatsen we de volgende tegel op de volgende lijn met flex-wrap: wrap. De tegels worden bovenaan gestapeld met align-content: flex-start. De tenslotte stellen we de breedte in op de breedte van het browserscherm met width: 100%:
```
.index {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: flex-start;
    width: 100%;
}
```
12. De tegels geven we een vaste hoogte en breedte in pixels. We geven ze een achtergrond kleur om ze te visualiseren. Boven elke tegel zetten we witruimte van een halve lettergrootte, nl 1em. De tekst zetten we vertikaal in het midden. We doen daarvoor het volgende:
  De stijlregel voor de tegels in de index ziet er dan zo uit:
```
.index .tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: 300px;
    background-color: bisque;
    margin: 1em 0 0 0;
}
```
  1. We maken van de tegels een flex-container.
  2. Met het align-items attribuut plaatsen we de a elementen in de tegels overr het midden van de verticale as.
  3. Met het justify-content attribuut plaatsen we de a elementen in de tegels in het midden.
13. Onder de laatste tegel plaatsen we ook een marge omdat die niet aan de pagefooter zou plakken:
```
.index .tile:last-child {
    margin-bottom: 1em;
}
```
14. Nog een stijlregel om een dubbele informatietegel te maken zoals in de wireframe is opgeven. De breedte is twee keer zo groot als de breedte van een gewone tegel:
```
.index .tile._2x1 {
    width: 600px;
}
```
15. Tenslotte nog de paginafooter. Die is zo breed als het browserventer. We plaatsen boven en rechts wat witruimte. De achtergrondkleur is zwart en de tekst wit:
```
.page-footer {
    width: 100%;
    min-height: 10%;
    color: rgb(250, 240, 230); /* linnen */
    background-color: rgb(65, 74, 76); /* outer space */
    padding: 0.5em 0 0 1em;
}
```

2020-03-23 08:47:23